﻿<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                Add User
            </h3>
        </div>
        <div class="panel-body form-horizontal">
            <div class="form-group">
                <label form="name" class="col col-md-2 control-label">Username</label>
                <div class="controls col col-md-10">
                    <input id="name" name="name" type="text" class="form-control"
                           formControlName="name" />
                    <div *ngIf="nameCtrl.pending">
                        Checking server, Please wait ...
                    </div>
                    <div *ngIf="nameCtrl.touched && nameCtrl.errors">
                        <label class="text-danger" *ngIf="nameCtrl.errors.required">
                            Username is required.
                        </label>
                        <label class="text-danger" *ngIf="nameCtrl.errors.cannotContainSpace">
                            Username can't contain space.
                        </label>
                        <label class="text-danger" *ngIf="nameCtrl.errors.nameShouldBeUnique">
                            This username is already taken.
                        </label>
                        <label class="text-danger" *ngIf="nameCtrl.errors.invalidData">
                            Check the inputs....
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label form="email" class="col col-md-2 control-label">Email</label>
                <div class="controls col col-md-10">
                    <input id="email" name="email" type="text" class="form-control"
                           formControlName="email" />
                    <div *ngIf="emailCtrl.touched && emailCtrl.errors">
                        <label class="text-danger" *ngIf="emailCtrl.errors.required">
                            Email is required.
                        </label>
                        <label class="text-danger" *ngIf="emailCtrl.errors.email">
                            Please type a valid email.
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label form="password" class="col col-md-2 control-label">Password</label>
                <div class="controls col col-md-10">
                    <input id="password" name="password" type="password" class="form-control"
                           formControlName="password" />
                    <label class="text-danger" *ngIf="passwordCtrl.touched && !passwordCtrl.valid">
                        Password is required.
                    </label>
                </div>
            </div>
        </div>
        <footer class="panel-footer">
            <button [disabled]="!form.valid"
                    type="submit" class="btn btn-primary">
                Submit
            </button>
        </footer>
    </div>
</form>